<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" content="https://github.com/JiHong88" />
    <meta name="keywords" content="wysiwyg,editor,javascript,suneditor,wysiwyg eidtor,rich text editor,html editor,contenteditable,위지위그 에디터 웹에디터">
    <meta name="description" content="Pure javascript wysiwyg web editor" />
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6933506635175446" crossorigin="anonymous"></script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-W0R51STQTY"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-W0R51STQTY');
    </script>
    <title>SunEditor</title>
    <!-- sample css -->
    <link rel="stylesheet" href="../css/bootstrap.css" media="all">
    <link rel="stylesheet" href="../css/sample.css" media="all">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">
    <!-- suneditor -->
    <link href="../../dist/css/suneditor.min.css" rel="stylesheet">
    <!-- codeMirror -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.css">
    <!-- KaTeX -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" aria-expanded="false" onclick="buttonToggle()">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../index.html" title="Suneditor"><b>SunEditor</b></a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="getting-started.html" title="Getting started">Getting started</a></li>
                <li><a href="examples.html" style="color:#fff;" title="Examples">Examples</a></li>
                <li><a href="options.html" title="Options">Options</a></li>
                <li><a href="customPlugins.html" title="Customize">CustomPlugins</a></li>
                <li><a href="document.html" title="Document">Document</a></li>
                <li class="badge">
                    <a href="https://www.paypal.me/jihong88?locale.x=en" target="_blank" title="PayPal Donate, Thanks"><img src="http://suneditor.com/docs/donate.png" class="donate-btn" alt="PayPal Donate" /></a>
                    <a href="https://github.com/JiHong88/SunEditor" target="_blank" title="Go to Github"><img alt="GitHub stars" src="https://img.shields.io/github/stars/jihong88/suneditor.svg?style=social"></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="content">
    <article class="markdown-body entry-content" itemprop="text">
        <!-- menu item -->
        <a id="setting" href="#setting"><h4 class="sub-title">Defining menu items</h4></a>
        <p></p>
        <textarea id="exampleOptions" style="width:100%; height:200px;">
            <div><span style="color: rgb(0, 130, 153);"><b>SunEditor</b></span><b>.<span style="color: rgb(61, 0, 153);">create</span></b>(<span style="color: rgb(152, 0, 0);">'exampleOptions'</span>, {</div>
            <div>&nbsp; &nbsp; font : [</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <span style="color: rgb(152, 0, 0);">'Arial'</span>,</div>
            <div><span style="color: rgb(152, 0, 0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 'tohoma'</span>,</div>
            <div><span style="color: rgb(152, 0, 0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 'Courier New,Courier'</span></div>
            <div>&nbsp; &nbsp; ],</div>
            <div>&nbsp; &nbsp; fontSize : [</div>
            <div><span style="color: rgb(0, 51, 153);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 8, 10, 14, 18, 24, 36</span></div>
            <div>&nbsp; &nbsp; ],</div>
            <div>&nbsp; &nbsp; colorList : [</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; [<span style="color: rgb(152, 0, 0);">'#ccc', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown'</span>],</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; [<span style="color: rgb(152, 0, 0);">'SlateGray', 'BurlyWood', 'DeepPink', 'FireBrick', 'Gold', 'SeaGreen'</span>],</div>
            <div>&nbsp; &nbsp; ],</div>
            <div>&nbsp; &nbsp; paragraphStyles : [</div>
            <div><span style="color: rgb(152, 0, 0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 'spaced'</span>,</div>
            <div><span style="color: rgb(152, 0, 0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 'neon'</span>,</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; {</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; name: <span style="color: rgb(152, 0, 0);"> 'Custom'</span></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; class: <span style="color: rgb(152, 0, 0);"> '__se__customClass'</span></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; }</div>
            <div>&nbsp; &nbsp; ],</div>
            <div>&nbsp; &nbsp; textStyles : [</div>
            <div><span style="color: rgb(152, 0, 0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 'translucent'</span>,</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; {</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; name: <span style="color: rgb(152, 0, 0);"> 'Emphasis'</span></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; style: <span style="color: rgb(152, 0, 0);"> '-webkit-text-emphasis: filled;'</span></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; }</div>
            <div>&nbsp; &nbsp; ],</div>
            <div>&nbsp; &nbsp; width : <span style="color: rgb(152, 0, 0);">'100%'</span>,</div>
            <div>&nbsp; &nbsp; maxWidth : <span style="color: rgb(152, 0, 0);">'600px'</span>,</div>
            <div>&nbsp; &nbsp; minWidth : <span style="color: rgb(152, 0, 0);">'400px'</span>,</div>
            <div>&nbsp; &nbsp; height : <span style="color: rgb(152, 0, 0);">'auto'</span>,</div>
            <div>&nbsp; &nbsp; videoWidth : <span style="color: rgb(152, 0, 0);">'80%'</span>,</div>
            <div>&nbsp; &nbsp; youtubeQuery : <span style="color: rgb(152, 0, 0);">'autoplay=1&mute=1&enablejsapi=1'</span>,</div>
            <div>&nbsp; &nbsp; popupDisplay : <span style="color: rgb(152, 0, 0);">'local'</span>,</div>
            <div>&nbsp; &nbsp; resizingBar : <span style="color: rgb(0, 130, 153);">false</span>,</div>
            <div>&nbsp; &nbsp; buttonList : [</div>
            <div><span style="color: rgb(152, 0, 0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'font', 'fontSize',</span></div>
            <div><span style="color: rgb(152, 0, 0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'fontColor', 'hiliteColor', 'video',</span></div>
            <div><span style="color: rgb(152, 0, 0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'fullScreen', 'codeView',</span></div>
            <div><span style="color: rgb(152, 0, 0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'preview', 'save'</span>]</div>
            <div>&nbsp; &nbsp; ],</div>
            <div>&nbsp; &nbsp; callBackSave: <span style="color: rgb(0, 51, 153);">function</span> (<span style="color: rgb(152, 0, 0);">contents</span>, <span style="color: rgb(172, 71, 17);">isChanged</span>) {</div>
            <div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: rgb(0, 51, 153);">alert</span>(<span style="color: rgb(152, 0, 0);">contents</span>);</div>
            <div>&nbsp; &nbsp; }</div>
            <div>});</div>
        </textarea>

        <!-- char count, button groups, toolbar container -->
        <a id="groups" href="#groups"><h4 class="sub-title">Char count, Button groups, toolbar container</h4></a>
        <p></p>
        <div class="sun-editor" id="toolbar_container" style="margin-bottom: 20px;"></div>
        <textarea id="lineBreak" style="width:100%; height:100px;">
            <div><span style="font-weight: bold;"><span style="color: rgb(0, 130, 153);">SUNEDITOR</span>.<span style="color: rgb(61, 0, 153);">create</span></span>(<span style="color: rgb(152, 0, 0);">'lineBreak'</span>, {</div>
            <div>&nbsp; &nbsp; toolbarContainer : <span style="color: rgb(152, 0, 0);">'#toolbar_container'</span>,</div>
            <div>&nbsp; &nbsp; showPathLabel : <span style="color: rgb(0, 130, 153);">false</span>,</div>
            <div>&nbsp; &nbsp; charCounter : <span style="color: rgb(0, 130, 153);">true</span>,</div>
            <div>&nbsp; &nbsp; maxCharCount : <span style="color: rgb(0, 51, 153);">720</span>,</div>
            <div>&nbsp; &nbsp; width : <span style="color: rgb(152, 0, 0);">'auto'</span>,</div>
            <div>&nbsp; &nbsp; maxWidth : <span style="color: rgb(152, 0, 0);">'700px'</span>,</div>
            <div>&nbsp; &nbsp; height : <span style="color: rgb(152, 0, 0);">'auto'</span>,</div>
            <div>&nbsp; &nbsp; minHeight : <span style="color: rgb(152, 0, 0);">'100px'</span>,</div>
            <div>&nbsp; &nbsp; maxHeight: <span style="color: rgb(152, 0, 0);">'250px'</span>,</div>
            <div>&nbsp; &nbsp; buttonList : [</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; [<span style="color: rgb(152, 0, 0);">'undo', 'redo', 'font', 'fontSize', 'formatBlock'</span>],</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; [<span style="color: rgb(152, 0, 0);">'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'removeFormat'</span>],</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<span style="color: rgb(152, 0, 0);"> '/' </span><span style="color: rgb(53, 53, 53); font-weight: bold; font-style: italic;">// Line break</span></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; [<span style="color: rgb(152, 0, 0);">'fontColor', 'hiliteColor', 'outdent', 'indent', 'align', 'horizontalRule', 'list', 'table'</span>],</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; [<span style="color: rgb(152, 0, 0);">'link', 'image', 'video', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save'</span>]</div>
            <div>&nbsp; &nbsp; ],</div>
            <div>&nbsp; &nbsp; <span>callBackSave</span> : <span style="color: rgb(0, 51, 153);">function</span> (<span style="color: rgb(152, 0, 0);">contents</span>, <span style="color: rgb(172, 71, 17);">isChanged</span>) {</div>
            <div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: rgb(0, 51, 153);">console</span>.<span style="color: rgb(0, 130, 153);">log</span>(<span style="color: rgb(152, 0, 0);">contents</span>);</div>
            <div>&nbsp; &nbsp; }</div>
            <div>});</div>
        </textarea>

        <!-- Iframe, fullPage and use CodeMirror -->
        <a id="CodeMirror" href="#CodeMirror"><h4 class="sub-title">Iframe, fullPage and use CodeMirror (^5.0.0)</h4></a>
        <p></p>
        <textarea id="useCodeMirror">
            <div>&amp;lt;<span style="color: rgb(107, 153, 0);">link</span> <span style="color: rgb(61, 0, 153);">rel</span>=<span style="color: rgb(0, 51, 153);">"stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.css"</span>&amp;gt;</div>
            <div>&amp;lt;<span style="color: rgb(107, 153, 0);">script</span> <span style="color: rgb(61, 0, 153);">src</span>=<span style="color: rgb(0, 51, 153);">"https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.js"</span>&amp;gt;&amp;lt;/<span style="color: rgb(107, 153, 0);">script</span>&amp;gt;</div>
            <div>&amp;lt;<span style="color: rgb(107, 153, 0);">script</span> <span style="color: rgb(61, 0, 153);">src</span>=<span style="color: rgb(0, 51, 153);">"https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/htmlmixed/htmlmixed.js"</span>&amp;gt;&amp;lt;/<span style="color: rgb(107, 153, 0);">script</span>&amp;gt;</div>
            <div>&amp;lt;<span style="color: rgb(107, 153, 0);">script</span> <span style="color: rgb(61, 0, 153);">src</span>=<span style="color: rgb(0, 51, 153);">"https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/xml/xml.js"</span>&amp;gt;&amp;lt;/<span style="color: rgb(107, 153, 0);">script</span>&amp;gt;</div>
            <div>&amp;lt;<span style="color: rgb(107, 153, 0);">script</span> <span style="color: rgb(61, 0, 153);">src</span>=<span style="color: rgb(0, 51, 153);">"https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/css/css.js"</span>&amp;gt;&amp;lt;/<span style="color: rgb(107, 153, 0);">script</span>&amp;gt;</div>
            <div><br></div>
            <div><span style="color: rgb(255, 94, 0);">import</span> <span style="color: rgb(0, 51, 153);">'suneditor/dist/css/suneditor.min.css'</span></div>
            <div><span style="color: rgb(255, 94, 0);">import</span> <span style="color: rgb(0, 51, 153);">suneditor</span> <span style="color: rgb(255, 94, 0);">from</span> <span style="color: rgb(0, 51, 153);">'suneditor'</span></div>
            <div><span style="color: rgb(189, 189, 189);">// Import codeMirror</span></div>
            <div><span style="color: rgb(255, 94, 0);">import</span> CodeMirror <span style="color: rgb(255, 94, 0);">from</span> 'codemirror'</div>
            <div><span style="color: rgb(255, 94, 0);">import</span> 'codemirror/mode/htmlmixed/htmlmixed'</div>
            <div><span style="color: rgb(255, 94, 0);">import</span> 'codemirror/lib/codemirror.css'</div>
            <div><br></div>
            <div>suneditor.<span style="color: rgb(61, 0, 153);">create</span>(<span style="color: rgb(0, 51, 153);">'sample'</span>, {</div>
            <div>    &nbsp;&nbsp;&nbsp;&nbsp;codeMirror<span style="color: rgb(255, 94, 0);">:</span> <span style="color: rgb(107, 153, 0);">CodeMirror</span>,</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;    <span style="color: rgb(189, 189, 189);">// Set options</span></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: rgb(189, 189, 189);">    // codeMirror: {</span></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: rgb(189, 189, 189);">    //     src: CodeMirror,</span></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: rgb(189, 189, 189);">    //     options: {...}</span></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: rgb(189, 189, 189);">    // }</span></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;    buttonList<span style="color: rgb(255, 94, 0);">:</span> [</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;       [<span style="color: rgb(0, 51, 153);">'codeView'</span>]</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;    ],</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;    height<span style="color: rgb(255, 94, 0);">:</span> <span style="color: rgb(0, 85, 255);">400</span></div>
            <div>});</div>
        </textarea>

        <!-- user function -->
        <a id="functions" href="#functions"><h4 class="sub-title">User Functions</h4></a>
        <p></p>
        <textarea id="exampleFunction" style="width:100%; height:250px;">
            <p>User Function Test</p>
        </textarea>
        <p></p>
        <button type="button" class="btn btn-md btn-default" onclick="sun_destroy()">Destroy</button>
        <button type="button" class="btn btn-md btn-default" onclick="sun_create()">Create</button>
        <button type="button" class="btn btn-md btn-default" onclick="sun_setOptions()" id="opt1">setOptions</button>
        <button type="button" class="btn btn-md btn-link" onclick="sun_resetOptions()" id="opt2" style="display: none;">resetOptions</button>
        <button type="button" class="btn btn-md btn-default" onclick="sun_setDefaultStyle()" id="ds1">setDefaultStyle</button>
        <button type="button" class="btn btn-md btn-link" onclick="sun_resetDefaultStyle()" id="ds2" style="display: none;">resetDefaultStyle</button>
        <button type="button" class="btn btn-md btn-danger" onclick="sun_noticeOpen('test notice')">noticeOpen</button>
        <button type="button" class="btn btn-md btn-danger" onclick="sun_noticeClose()">noticeClose</button>
        <div></div>
        <button type="button" class="btn btn-md btn-success" onclick="sun_save()">save</button>
        <button type="button" class="btn btn-md btn-success" onclick="sun_getContext()">getContext</button>
        <button type="button" class="btn btn-md btn-success" onclick="sun_getContents()">getContents</button>
        <button type="button" class="btn btn-md btn-success" onclick="sun_getText()">getText</button>
        <button type="button" class="btn btn-md btn-success" onclick="sun_getImagesInfo()">getImagesInfo</button>
        <button type="button" class="btn btn-md btn-success" onclick="sun_getFilesInfo('video')">getFilesInfo('video')</button>
        <div>
            <input type="file" id="example_files_input" accept="image/*" multiple="multiple" style="display: inline-block; background: #fff;"/>
            <button type="button" class="btn btn-md btn-success" onclick="sun_insertImage()">insertImage</button>
        </div>
        <button type="button" class="btn btn-md btn-warning" onclick="sun_insertHTML('<img src=\'http://suneditor.com/docs/icon_js.svg\' style=\'width:115px; height:64px;\'>')">insertHTML</button>
        <button type="button" class="btn btn-md btn-warning" onclick="sun_setContents('set contents')">setContents</button>
        <button type="button" class="btn btn-md btn-warning" onclick="sun_appendContents('append contents')">AppendContents</button>
        <button type="button" class="btn btn-md btn-primary" onclick="sun_readonly()">ReadOnly</button>
        <button type="button" class="btn btn-md btn-primary" onclick="sun_disable()">Disable</button>
        <button type="button" class="btn btn-md btn-primary" onclick="sun_enable()">Enable</button>
        <button type="button" class="btn btn-md btn-primary" onclick="sun_hide()">Hide</button>
        <button type="button" class="btn btn-md btn-primary" onclick="sun_show()">Show</button>
        <div></div>
        <button type="button" class="btn btn-md btn-info" onclick="sun_toolbar_disable()">Disable toolbar</button>
        <button type="button" class="btn btn-md btn-info" onclick="sun_toolbar_enable()">Enable toolbar</button>
        <button type="button" class="btn btn-md btn-info" onclick="sun_toolbar_hide()">Hide toolbar</button>
        <button type="button" class="btn btn-md btn-info" onclick="sun_toolbar_show()">Show toolbar</button>


        <!-- image resize -->
        <a id="image_resize" href="#image_resize"><h4 class="sub-title">Toolbar : Responsive and more buttons</h4></a>
        <p style="height:0px; float:right; margin-top:-30px;"><span id="responsive_Toolbar_size" style="font-weight:bold; color:#ffe4c4;">1200px</span></p>
        <textarea id="responsive_Toolbar" style="display: none;"><p>Resize the browser window.</p></textarea>
        <p></p>
<div class="highlight highlight-source-js"><pre><span class="pl-c1">SUNEDITOR</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-s">'responsive_Toolbar'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">templates</span>: <span class="pl-kos">[</span>
        <span class="pl-kos">{</span>
            <span class="pl-c1">name</span>: <span class="pl-s">'Template-1'</span><span class="pl-kos">,</span>
            <span class="pl-c1">html</span>: <span class="pl-s">'&lt;p&gt;HTML source1&lt;/p&gt;'</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">{</span>
            <span class="pl-c1">name</span>: <span class="pl-s">'Template-2'</span><span class="pl-kos">,</span>
            <span class="pl-c1">html</span>: <span class="pl-s">'&lt;p&gt;HTML source2&lt;/p&gt;'</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">codeMirror</span>: <span class="pl-v">CodeMirror</span><span class="pl-kos">,</span>
    <span class="pl-c1">katex</span>: <span class="pl-s1">katex</span><span class="pl-kos">,</span>
    <span class="pl-c1">buttonList</span>: <span class="pl-kos">[</span>
        <span class="pl-c">// default</span>
        <span class="pl-kos">[</span><span class="pl-s">'undo'</span><span class="pl-kos">,</span> <span class="pl-s">'redo'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">':p-More Paragraph-default.more_paragraph'</span><span class="pl-kos">,</span> <span class="pl-s">'font'</span><span class="pl-kos">,</span> <span class="pl-s">'fontSize'</span><span class="pl-kos">,</span> <span class="pl-s">'formatBlock'</span><span class="pl-kos">,</span> <span class="pl-s">'paragraphStyle'</span><span class="pl-kos">,</span> <span class="pl-s">'blockquote'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'bold'</span><span class="pl-kos">,</span> <span class="pl-s">'underline'</span><span class="pl-kos">,</span> <span class="pl-s">'italic'</span><span class="pl-kos">,</span> <span class="pl-s">'strike'</span><span class="pl-kos">,</span> <span class="pl-s">'subscript'</span><span class="pl-kos">,</span> <span class="pl-s">'superscript'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'fontColor'</span><span class="pl-kos">,</span> <span class="pl-s">'hiliteColor'</span><span class="pl-kos">,</span> <span class="pl-s">'textStyle'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'removeFormat'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'outdent'</span><span class="pl-kos">,</span> <span class="pl-s">'indent'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'align'</span><span class="pl-kos">,</span> <span class="pl-s">'horizontalRule'</span><span class="pl-kos">,</span> <span class="pl-s">'list'</span><span class="pl-kos">,</span> <span class="pl-s">'lineHeight'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'-right'</span><span class="pl-kos">,</span> <span class="pl-s">':i-More Misc-default.more_vertical'</span><span class="pl-kos">,</span> <span class="pl-s">'fullScreen'</span><span class="pl-kos">,</span> <span class="pl-s">'showBlocks'</span><span class="pl-kos">,</span> <span class="pl-s">'codeView'</span><span class="pl-kos">,</span> <span class="pl-s">'preview'</span><span class="pl-kos">,</span> <span class="pl-s">'print'</span><span class="pl-kos">,</span> <span class="pl-s">'save'</span><span class="pl-kos">,</span> <span class="pl-s">'template'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'-right'</span><span class="pl-kos">,</span> <span class="pl-s">':r-More Rich-default.more_plus'</span><span class="pl-kos">,</span> <span class="pl-s">'table'</span><span class="pl-kos">,</span> <span class="pl-s">'math'</span><span class="pl-kos">,</span> <span class="pl-s">'imageGallery'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'-right'</span><span class="pl-kos">,</span> <span class="pl-s">'image'</span><span class="pl-kos">,</span> <span class="pl-s">'video'</span><span class="pl-kos">,</span> <span class="pl-s">'audio'</span><span class="pl-kos">,</span> <span class="pl-s">'link'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c">// (min-width: 992)</span>
        <span class="pl-kos">[</span><span class="pl-s">'%992'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span>
            <span class="pl-kos">[</span><span class="pl-s">'undo'</span><span class="pl-kos">,</span> <span class="pl-s">'redo'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">':p-More Paragraph-default.more_paragraph'</span><span class="pl-kos">,</span> <span class="pl-s">'font'</span><span class="pl-kos">,</span> <span class="pl-s">'fontSize'</span><span class="pl-kos">,</span> <span class="pl-s">'formatBlock'</span><span class="pl-kos">,</span> <span class="pl-s">'paragraphStyle'</span><span class="pl-kos">,</span> <span class="pl-s">'blockquote'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">'bold'</span><span class="pl-kos">,</span> <span class="pl-s">'underline'</span><span class="pl-kos">,</span> <span class="pl-s">'italic'</span><span class="pl-kos">,</span> <span class="pl-s">'strike'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">':t-More Text-default.more_text'</span><span class="pl-kos">,</span> <span class="pl-s">'subscript'</span><span class="pl-kos">,</span> <span class="pl-s">'superscript'</span><span class="pl-kos">,</span> <span class="pl-s">'fontColor'</span><span class="pl-kos">,</span> <span class="pl-s">'hiliteColor'</span><span class="pl-kos">,</span> <span class="pl-s">'textStyle'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">'removeFormat'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">'outdent'</span><span class="pl-kos">,</span> <span class="pl-s">'indent'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">'align'</span><span class="pl-kos">,</span> <span class="pl-s">'horizontalRule'</span><span class="pl-kos">,</span> <span class="pl-s">'list'</span><span class="pl-kos">,</span> <span class="pl-s">'lineHeight'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">'-right'</span><span class="pl-kos">,</span> <span class="pl-s">':i-More Misc-default.more_vertical'</span><span class="pl-kos">,</span> <span class="pl-s">'fullScreen'</span><span class="pl-kos">,</span> <span class="pl-s">'showBlocks'</span><span class="pl-kos">,</span> <span class="pl-s">'codeView'</span><span class="pl-kos">,</span> <span class="pl-s">'preview'</span><span class="pl-kos">,</span> <span class="pl-s">'print'</span><span class="pl-kos">,</span> <span class="pl-s">'save'</span><span class="pl-kos">,</span> <span class="pl-s">'template'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">'-right'</span><span class="pl-kos">,</span> <span class="pl-s">':r-More Rich-default.more_plus'</span><span class="pl-kos">,</span> <span class="pl-s">'table'</span><span class="pl-kos">,</span> <span class="pl-s">'link'</span><span class="pl-kos">,</span> <span class="pl-s">'image'</span><span class="pl-kos">,</span> <span class="pl-s">'video'</span><span class="pl-kos">,</span> <span class="pl-s">'audio'</span><span class="pl-kos">,</span> <span class="pl-s">'math'</span><span class="pl-kos">,</span> <span class="pl-s">'imageGallery'</span><span class="pl-kos">]</span>
        <span class="pl-kos">]</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c">// (min-width: 767)</span>
        <span class="pl-kos">[</span><span class="pl-s">'%767'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span>
            <span class="pl-kos">[</span><span class="pl-s">'undo'</span><span class="pl-kos">,</span> <span class="pl-s">'redo'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">':p-More Paragraph-default.more_paragraph'</span><span class="pl-kos">,</span> <span class="pl-s">'font'</span><span class="pl-kos">,</span> <span class="pl-s">'fontSize'</span><span class="pl-kos">,</span> <span class="pl-s">'formatBlock'</span><span class="pl-kos">,</span> <span class="pl-s">'paragraphStyle'</span><span class="pl-kos">,</span> <span class="pl-s">'blockquote'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">':t-More Text-default.more_text'</span><span class="pl-kos">,</span> <span class="pl-s">'bold'</span><span class="pl-kos">,</span> <span class="pl-s">'underline'</span><span class="pl-kos">,</span> <span class="pl-s">'italic'</span><span class="pl-kos">,</span> <span class="pl-s">'strike'</span><span class="pl-kos">,</span> <span class="pl-s">'subscript'</span><span class="pl-kos">,</span> <span class="pl-s">'superscript'</span><span class="pl-kos">,</span> <span class="pl-s">'fontColor'</span><span class="pl-kos">,</span> <span class="pl-s">'hiliteColor'</span><span class="pl-kos">,</span> <span class="pl-s">'textStyle'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">'removeFormat'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">'outdent'</span><span class="pl-kos">,</span> <span class="pl-s">'indent'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">':e-More Line-default.more_horizontal'</span><span class="pl-kos">,</span> <span class="pl-s">'align'</span><span class="pl-kos">,</span> <span class="pl-s">'horizontalRule'</span><span class="pl-kos">,</span> <span class="pl-s">'list'</span><span class="pl-kos">,</span> <span class="pl-s">'lineHeight'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">':r-More Rich-default.more_plus'</span><span class="pl-kos">,</span> <span class="pl-s">'table'</span><span class="pl-kos">,</span> <span class="pl-s">'link'</span><span class="pl-kos">,</span> <span class="pl-s">'image'</span><span class="pl-kos">,</span> <span class="pl-s">'video'</span><span class="pl-kos">,</span> <span class="pl-s">'audio'</span><span class="pl-kos">,</span> <span class="pl-s">'math'</span><span class="pl-kos">,</span> <span class="pl-s">'imageGallery'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">'-right'</span><span class="pl-kos">,</span> <span class="pl-s">':i-More Misc-default.more_vertical'</span><span class="pl-kos">,</span> <span class="pl-s">'fullScreen'</span><span class="pl-kos">,</span> <span class="pl-s">'showBlocks'</span><span class="pl-kos">,</span> <span class="pl-s">'codeView'</span><span class="pl-kos">,</span> <span class="pl-s">'preview'</span><span class="pl-kos">,</span> <span class="pl-s">'print'</span><span class="pl-kos">,</span> <span class="pl-s">'save'</span><span class="pl-kos">,</span> <span class="pl-s">'template'</span><span class="pl-kos">]</span>
        <span class="pl-kos">]</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c">// (min-width: 480)</span>
        <span class="pl-kos">[</span><span class="pl-s">'%480'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span>
            <span class="pl-kos">[</span><span class="pl-s">'undo'</span><span class="pl-kos">,</span> <span class="pl-s">'redo'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">':p-More Paragraph-default.more_paragraph'</span><span class="pl-kos">,</span> <span class="pl-s">'font'</span><span class="pl-kos">,</span> <span class="pl-s">'fontSize'</span><span class="pl-kos">,</span> <span class="pl-s">'formatBlock'</span><span class="pl-kos">,</span> <span class="pl-s">'paragraphStyle'</span><span class="pl-kos">,</span> <span class="pl-s">'blockquote'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">':t-More Text-default.more_text'</span><span class="pl-kos">,</span> <span class="pl-s">'bold'</span><span class="pl-kos">,</span> <span class="pl-s">'underline'</span><span class="pl-kos">,</span> <span class="pl-s">'italic'</span><span class="pl-kos">,</span> <span class="pl-s">'strike'</span><span class="pl-kos">,</span> <span class="pl-s">'subscript'</span><span class="pl-kos">,</span> <span class="pl-s">'superscript'</span><span class="pl-kos">,</span> <span class="pl-s">'fontColor'</span><span class="pl-kos">,</span> <span class="pl-s">'hiliteColor'</span><span class="pl-kos">,</span> <span class="pl-s">'textStyle'</span><span class="pl-kos">,</span> <span class="pl-s">'removeFormat'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">':e-More Line-default.more_horizontal'</span><span class="pl-kos">,</span> <span class="pl-s">'outdent'</span><span class="pl-kos">,</span> <span class="pl-s">'indent'</span><span class="pl-kos">,</span> <span class="pl-s">'align'</span><span class="pl-kos">,</span> <span class="pl-s">'horizontalRule'</span><span class="pl-kos">,</span> <span class="pl-s">'list'</span><span class="pl-kos">,</span> <span class="pl-s">'lineHeight'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">':r-More Rich-default.more_plus'</span><span class="pl-kos">,</span> <span class="pl-s">'table'</span><span class="pl-kos">,</span> <span class="pl-s">'link'</span><span class="pl-kos">,</span> <span class="pl-s">'image'</span><span class="pl-kos">,</span> <span class="pl-s">'video'</span><span class="pl-kos">,</span> <span class="pl-s">'audio'</span><span class="pl-kos">,</span> <span class="pl-s">'math'</span><span class="pl-kos">,</span> <span class="pl-s">'imageGallery'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-kos">[</span><span class="pl-s">'-right'</span><span class="pl-kos">,</span> <span class="pl-s">':i-More Misc-default.more_vertical'</span><span class="pl-kos">,</span> <span class="pl-s">'fullScreen'</span><span class="pl-kos">,</span> <span class="pl-s">'showBlocks'</span><span class="pl-kos">,</span> <span class="pl-s">'codeView'</span><span class="pl-kos">,</span> <span class="pl-s">'preview'</span><span class="pl-kos">,</span> <span class="pl-s">'print'</span><span class="pl-kos">,</span> <span class="pl-s">'save'</span><span class="pl-kos">,</span> <span class="pl-s">'template'</span><span class="pl-kos">]</span>
        <span class="pl-kos">]</span><span class="pl-kos">]</span>
    <span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>


        <!-- image resize -->
        <a id="image_file" href="#image_file"><h4 class="sub-title">Image file resize</h4></a>
        <p></p>
        <textarea id="imageResize" style="display: none;"></textarea>
        <p></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> <span class="pl-s1">editorimageResize</span> <span class="pl-c1">=</span> <span class="pl-c1">SUNEDITOR</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-s">'imageResize'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">buttonList</span>: <span class="pl-kos">[</span>
        <span class="pl-kos">[</span><span class="pl-s">'undo'</span><span class="pl-kos">,</span> <span class="pl-s">'redo'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'image'</span><span class="pl-kos">]</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-c">/** UploadBefore event</span>
<span class="pl-c">If undefined is returned, it waits until "uploadHandler" is executed.</span>
<span class="pl-c">"uploadHandler" is an upload function with "core" and "info" bound. (plugin.upload.bind(core, info))</span>
<span class="pl-c">[upload files] : uploadHandler(files or [new File(...),])</span>
<span class="pl-c">[error]        : uploadHandler("Error message")</span>
<span class="pl-c">[Just finish]  : uploadHandler()</span>
<span class="pl-c">[directly register] : uploadHandler(response) // Same format as "imageUploadUrl" response</span>
<span class="pl-c"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ex) {</span>
<span class="pl-c"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// "errorMessage": "insert error message",</span>
<span class="pl-c">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"result": [ { "url": "...", "name": "...", "size": "999" }, ]</span>
<span class="pl-c">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }</span>
<span class="pl-c">*/</span>
<span class="pl-s1">editorimageResize</span><span class="pl-kos">.</span><span class="pl-en">onImageUploadBefore</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">files</span><span class="pl-kos">,</span> <span class="pl-s1">info</span><span class="pl-kos">,</span> <span class="pl-s1">core</span><span class="pl-kos">,</span> <span class="pl-s1">uploadHandler</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">try</span> <span class="pl-kos">{</span>
        <span class="pl-v">ResizeImage</span><span class="pl-kos">(</span><span class="pl-s1">files</span><span class="pl-kos">,</span> <span class="pl-s1">uploadHandler</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span> <span class="pl-k">catch</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">uploadHandler</span><span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">.</span><span class="pl-en">toString</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-c">// image resize</span>
<span class="pl-k">function</span> <span class="pl-v">ResizeImage</span> <span class="pl-kos">(</span><span class="pl-s1">files</span><span class="pl-kos">,</span> <span class="pl-s1">uploadHandler</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">uploadFile</span> <span class="pl-c1">=</span> <span class="pl-s1">files</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">img</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">'img'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">canvas</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">'canvas'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">reader</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">FileReader</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-s1">reader</span><span class="pl-kos">.</span><span class="pl-en">onload</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">img</span><span class="pl-kos">.</span><span class="pl-c1">src</span> <span class="pl-c1">=</span> <span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-c1">result</span>
        <span class="pl-s1">img</span><span class="pl-kos">.</span><span class="pl-en">onload</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-k">let</span> <span class="pl-s1">ctx</span> <span class="pl-c1">=</span> <span class="pl-s1">canvas</span><span class="pl-kos">.</span><span class="pl-en">getContext</span><span class="pl-kos">(</span><span class="pl-s">"2d"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">ctx</span><span class="pl-kos">.</span><span class="pl-en">drawImage</span><span class="pl-kos">(</span><span class="pl-s1">img</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-k">const</span> <span class="pl-c1">MAX_WIDTH</span> <span class="pl-c1">=</span> <span class="pl-c1">200</span><span class="pl-kos">;</span>
            <span class="pl-k">const</span> <span class="pl-c1">MAX_HEIGHT</span> <span class="pl-c1">=</span> <span class="pl-c1">100</span><span class="pl-kos">;</span>
            <span class="pl-k">let</span> <span class="pl-s1">width</span> <span class="pl-c1">=</span> <span class="pl-s1">img</span><span class="pl-kos">.</span><span class="pl-c1">width</span><span class="pl-kos">;</span>
            <span class="pl-k">let</span> <span class="pl-s1">height</span> <span class="pl-c1">=</span> <span class="pl-s1">img</span><span class="pl-kos">.</span><span class="pl-c1">height</span><span class="pl-kos">;</span>

            <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">width</span> <span class="pl-c1">&gt;</span> <span class="pl-s1">height</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">width</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">MAX_WIDTH</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                    <span class="pl-s1">height</span> *= <span class="pl-c1">MAX_WIDTH</span> / <span class="pl-s1">width</span><span class="pl-kos">;</span>
                    <span class="pl-s1">width</span> <span class="pl-c1">=</span> <span class="pl-c1">MAX_WIDTH</span><span class="pl-kos">;</span>
                <span class="pl-kos">}</span>
            <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
                <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">height</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">MAX_HEIGHT</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                    <span class="pl-s1">width</span> *= <span class="pl-c1">MAX_HEIGHT</span> / <span class="pl-s1">height</span><span class="pl-kos">;</span>
                    <span class="pl-s1">height</span> <span class="pl-c1">=</span> <span class="pl-c1">MAX_HEIGHT</span><span class="pl-kos">;</span>
                <span class="pl-kos">}</span>
            <span class="pl-kos">}</span>

            <span class="pl-s1">canvas</span><span class="pl-kos">.</span><span class="pl-c1">width</span> <span class="pl-c1">=</span> <span class="pl-s1">width</span><span class="pl-kos">;</span>
            <span class="pl-s1">canvas</span><span class="pl-kos">.</span><span class="pl-c1">height</span> <span class="pl-c1">=</span> <span class="pl-s1">height</span><span class="pl-kos">;</span>

            <span class="pl-s1">ctx</span> <span class="pl-c1">=</span> <span class="pl-s1">canvas</span><span class="pl-kos">.</span><span class="pl-en">getContext</span><span class="pl-kos">(</span><span class="pl-s">"2d"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">ctx</span><span class="pl-kos">.</span><span class="pl-en">drawImage</span><span class="pl-kos">(</span><span class="pl-s1">img</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">width</span><span class="pl-kos">,</span> <span class="pl-s1">height</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-s1">canvas</span><span class="pl-kos">.</span><span class="pl-en">toBlob</span><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">blob</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-s1">uploadHandler</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-k">new</span> <span class="pl-v">File</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s1">blob</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-s1">uploadFile</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">uploadFile</span><span class="pl-kos">.</span><span class="pl-c1">type</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>

    <span class="pl-s1">reader</span><span class="pl-kos">.</span><span class="pl-en">readAsDataURL</span><span class="pl-kos">(</span><span class="pl-s1">uploadFile</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>

        <!-- image management editor-->
        <a id="image_manager" href="#image_manager"><h4 class="sub-title">Image management</h4></a>
        <p></p>
        <textarea id="imageManagement" style="display: none;">
            <p>cat</p>
            <div class="se-component se-image-container __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="http://suneditor.com/docs/s-cat.jpg" data-align="none" alt="" data-rotate="" data-proportion="true" data-rotatex="" data-rotatey="" origin-size="300,199" data-origin="300,199" data-file-name="s-cat.jpg" data-file-size="40500" style="width: 300px; transform: rotate(0deg); height: 198px;" data-size="300px,198px" data-index="0"></figure></div>
            <p>cat1</p>
            <div class="se-component se-image-container __se__float-none" contenteditable="false"><figure style="margin: 0px; width: 300px;"><img src="http://suneditor.com/docs/s-cat1.jpg" data-align="none" alt="" data-rotate="" data-proportion="true" data-rotatex="" data-rotatey="" origin-size="300,200" data-origin="300,200" data-file-name="s-cat1.jpg" data-file-size="52000" style="width: 300px; height: 174px; transform: rotate(0deg);" data-size="300px,174px" data-index="2"><figcaption style="margin-top: 0px;"><div>Insert description</div></figcaption></figure></div>
            <p><br></p>
        </textarea>
        <div class="component-list">
            <div class="file-list-info">
                <span>Attached files</span>
                <span class="xefu-btn">
                    <span class="files-text">Attach image</span>
                </span>
                <input type="file" id="files_upload" accept="image/*" multiple="multiple" class="files-text files-input" />
                <span id="image_size" class="total-size text-small-2">0KB</span>
                <button class="btn btn-md btn-danger" id="image_remove" disabled onclick="deleteCheckedImages()">Remove</button>
            </div>
            <div class="file-list">
                <ul id="image_list">
                </ul>
            </div>
        </div>
        <div class="component-list">
            <div class="file-list-info">
                <span>Video list</span>
            </div>
            <div class="component-file-list">
                <ul id="video_list">
                </ul>
            </div>
        </div>

<!-- image management html-->
<div class="highlight highlight-text-html-basic"><pre><span class="pl-c">&lt;!-- image list --&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">image_wrapper</span>" <span class="pl-c1">class</span>="<span class="pl-s">component-list</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">file-list-info</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>Attached files<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">xefu-btn</span>"<span class="pl-kos">&gt;</span>
            <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">files-text</span>"<span class="pl-kos">&gt;</span>Attach image<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">file</span>" <span class="pl-c1">id</span>="<span class="pl-s">files_upload</span>" <span class="pl-c1">accept</span>="<span class="pl-s">image/*</span>" <span class="pl-c1">multiple</span>="<span class="pl-s">multiple</span>" <span class="pl-c1">class</span>="<span class="pl-s">files-text files-input</span>"/&gt;
        <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">id</span>="<span class="pl-s">image_size</span>" <span class="pl-c1">class</span>="<span class="pl-s">total-size text-small-2</span>"<span class="pl-kos">&gt;</span>0KB<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-md btn-danger</span>" <span class="pl-c1">id</span>="<span class="pl-s">image_remove</span>" <span class="pl-c1">disabled</span> <span class="pl-c1">onclick</span>="<span class="pl-s">deleteCheckedImages()</span>"<span class="pl-kos">&gt;</span>Remove<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">file-list</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">ul</span> <span class="pl-c1">id</span>="<span class="pl-s">image_list</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-c">&lt;!-- video list --&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">component-list</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">file-list-info</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>Video list<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">component-file-list</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">ul</span> <span class="pl-c1">id</span>="<span class="pl-s">video_list</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>

<!-- image management js-->
<div class="highlight highlight-source-js"><pre><span class="pl-k">const</span> <span class="pl-s1">imageWrapper</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'image_wrapper'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">imageSize</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'image_size'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">imageRemove</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'image_remove'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">imageTable</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'image_list'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">imageList</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">selectedImages</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">videoTable</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'video_list'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">videoList</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

<span class="pl-c">// Array.prototype.findIndex (IE)</span>
<span class="pl-k">function</span> <span class="pl-en">findIndex</span><span class="pl-kos">(</span><span class="pl-s1">arr</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">let</span> <span class="pl-s1">idx</span> <span class="pl-c1">=</span> <span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">;</span>

    <span class="pl-s1">arr</span><span class="pl-kos">.</span><span class="pl-en">some</span><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">a</span><span class="pl-kos">,</span> <span class="pl-s1">i</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">a</span> <span class="pl-c1">===</span> <span class="pl-s">'number'</span> ? <span class="pl-s1">a</span> : <span class="pl-s1">a</span><span class="pl-kos">.</span><span class="pl-c1">index</span><span class="pl-kos">)</span> <span class="pl-c1">===</span> <span class="pl-s1">index</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-s1">idx</span> <span class="pl-c1">=</span> <span class="pl-s1">i</span><span class="pl-kos">;</span>
            <span class="pl-k">return</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
        <span class="pl-k">return</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span>

    <span class="pl-k">return</span> <span class="pl-s1">idx</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-c">/** event registration */</span>
<span class="pl-s1">editorImageSample</span><span class="pl-kos">.</span><span class="pl-c1">onImageUpload</span> <span class="pl-c1">=</span> <span class="pl-s1">imageUpload</span><span class="pl-kos">;</span>
<span class="pl-s1">editorImageSample</span><span class="pl-kos">.</span><span class="pl-c1">onVideoUpload</span> <span class="pl-c1">=</span> <span class="pl-s1">videoUpload</span><span class="pl-kos">;</span>

<span class="pl-c">/** --- image list --- */</span>
<span class="pl-k">const</span> <span class="pl-s1">editorImageSample</span> <span class="pl-c1">=</span> <span class="pl-c1">SUNEDITOR</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-s">'imageManagement'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">buttonList</span>: <span class="pl-kos">[</span>
        <span class="pl-kos">[</span><span class="pl-s">'undo'</span><span class="pl-kos">,</span> <span class="pl-s">'redo'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'formatBlock'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'horizontalRule'</span><span class="pl-kos">,</span> <span class="pl-s">'list'</span><span class="pl-kos">,</span> <span class="pl-s">'table'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'image'</span><span class="pl-kos">,</span> <span class="pl-s">'video'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span><span class="pl-s">'showBlocks'</span><span class="pl-kos">,</span> <span class="pl-s">'fullScreen'</span><span class="pl-kos">,</span> <span class="pl-s">'preview'</span><span class="pl-kos">,</span> <span class="pl-s">'print'</span><span class="pl-kos">]</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-s1">editorImageSample</span><span class="pl-kos">.</span><span class="pl-en">onImageUpload</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">targetElement</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">,</span> <span class="pl-s1">imageInfo</span><span class="pl-kos">,</span> <span class="pl-s1">remainingFilesCount</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">state</span> <span class="pl-c1">===</span> <span class="pl-s">'delete'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">imageList</span><span class="pl-kos">.</span><span class="pl-en">splice</span><span class="pl-kos">(</span><span class="pl-en">findIndex</span><span class="pl-kos">(</span><span class="pl-s1">imageList</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">state</span> <span class="pl-c1">===</span> <span class="pl-s">'create'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-s1">imageList</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">imageInfo</span><span class="pl-kos">)</span>
        <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span> <span class="pl-c">// update }</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">remainingFilesCount</span> <span class="pl-c1">===</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-en">setImageList</span><span class="pl-kos">(</span><span class="pl-s1">imageList</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-c">// Upload from outside the editor</span>
<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'files_upload'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">addEventListener</span><span class="pl-kos">(</span><span class="pl-s">'change'</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-c1">files</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">editorImageSample</span><span class="pl-kos">.</span><span class="pl-en">insertImage</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-c1">files</span><span class="pl-kos">)</span>
        <span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">=</span> <span class="pl-s">''</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-c">// Edit image list</span>
<span class="pl-k">function</span> <span class="pl-en">setImageList</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">let</span> <span class="pl-s1">list</span> <span class="pl-c1">=</span> <span class="pl-s">''</span><span class="pl-kos">;</span>
    <span class="pl-k">let</span> <span class="pl-s1">size</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>

    <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">image</span><span class="pl-kos">,</span> <span class="pl-s1">fixSize</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> &amp;<span class="pl-s1">lt</span><span class="pl-kos">;</span> <span class="pl-s1">imageList</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">;</span> <span class="pl-s1">i</span><span class="pl-c1">++</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">image</span> <span class="pl-c1">=</span> <span class="pl-s1">imageList</span><span class="pl-kos">[</span><span class="pl-s1">i</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
        <span class="pl-s1">fixSize</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">image</span><span class="pl-kos">.</span><span class="pl-c1">size</span> / <span class="pl-c1">1000</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toFixed</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span> * <span class="pl-c1">1</span>
            
        <span class="pl-s1">list</span> <span class="pl-c1">+=</span> <span class="pl-s">'&amp;lt;li id="img_'</span> <span class="pl-c1">+</span> <span class="pl-s1">image</span><span class="pl-kos">.</span><span class="pl-c1">index</span> <span class="pl-c1">+</span> <span class="pl-s">'"&amp;gt;'</span> <span class="pl-c1">+</span>
                    <span class="pl-s">'&amp;lt;div onclick="checkImage('</span> <span class="pl-c1">+</span> <span class="pl-s1">image</span><span class="pl-kos">.</span><span class="pl-c1">index</span> <span class="pl-c1">+</span> <span class="pl-s">')"&amp;gt;'</span> <span class="pl-c1">+</span>
                        <span class="pl-s">'&amp;lt;div class="image-wrapper"&amp;gt;&amp;lt;img src="'</span> <span class="pl-c1">+</span> <span class="pl-s1">image</span><span class="pl-kos">.</span><span class="pl-c1">src</span> <span class="pl-c1">+</span> <span class="pl-s">'"&amp;gt;&amp;lt;/div&amp;gt;'</span> <span class="pl-c1">+</span>
                    <span class="pl-s">'&amp;lt;/div&amp;gt;'</span> <span class="pl-c1">+</span>
                    <span class="pl-s">'&amp;lt;a href="javascript:void(0)" onclick="selectImage(\'select\','</span> <span class="pl-c1">+</span> <span class="pl-s1">image</span><span class="pl-kos">.</span><span class="pl-c1">index</span> <span class="pl-c1">+</span> <span class="pl-s">')" class="image-size"&amp;gt;'</span> <span class="pl-c1">+</span> <span class="pl-s1">fixSize</span> <span class="pl-c1">+</span> <span class="pl-s">'KB&amp;lt;/a&amp;gt;'</span> <span class="pl-c1">+</span>
                    <span class="pl-s">'&amp;lt;div class="image-check"&amp;gt;&amp;lt;svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""&amp;gt;&amp;lt;path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"&amp;gt;&amp;lt;/path&amp;gt;&amp;lt;/svg&amp;gt;&amp;lt;/div&amp;gt;'</span> <span class="pl-c1">+</span>
                <span class="pl-s">'&amp;lt;/li&amp;gt;'</span><span class="pl-kos">;</span>
        
        <span class="pl-s1">size</span> <span class="pl-c1">+=</span> <span class="pl-s1">fixSize</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-s1">imageSize</span><span class="pl-kos">.</span><span class="pl-c1">innerText</span> <span class="pl-c1">=</span> <span class="pl-s1">size</span><span class="pl-kos">.</span><span class="pl-en">toFixed</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-c1">+</span> <span class="pl-s">'KB'</span><span class="pl-kos">;</span>
    <span class="pl-s1">imageTable</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span> <span class="pl-c1">=</span> <span class="pl-s1">list</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-c">// Click the file size</span>
<span class="pl-k">function</span> <span class="pl-en">selectImage</span> <span class="pl-kos">(</span><span class="pl-s1">type</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">imageList</span><span class="pl-kos">[</span><span class="pl-en">findIndex</span><span class="pl-kos">(</span><span class="pl-s1">imageList</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">[</span><span class="pl-s1">type</span><span class="pl-kos">]</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-c">// Image check</span>
<span class="pl-k">function</span> <span class="pl-en">checkImage</span> <span class="pl-kos">(</span><span class="pl-s1">index</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">li</span> <span class="pl-c1">=</span> <span class="pl-s1">imageTable</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">'#img_'</span> <span class="pl-c1">+</span> <span class="pl-s1">index</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">currentImageIdx</span> <span class="pl-c1">=</span> <span class="pl-en">findIndex</span><span class="pl-kos">(</span><span class="pl-s1">selectedImages</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">currentImageIdx</span> &amp;<span class="pl-s1">gt</span><span class="pl-kos">;</span> <span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">selectedImages</span><span class="pl-kos">.</span><span class="pl-en">splice</span><span class="pl-kos">(</span><span class="pl-s1">currentImageIdx</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">)</span>
        <span class="pl-s1">li</span><span class="pl-kos">.</span><span class="pl-c1">className</span> <span class="pl-c1">=</span> <span class="pl-s">''</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
        <span class="pl-s1">selectedImages</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">index</span><span class="pl-kos">)</span>
        <span class="pl-s1">li</span><span class="pl-kos">.</span><span class="pl-c1">className</span> <span class="pl-c1">=</span> <span class="pl-s">'checked'</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">selectedImages</span><span class="pl-kos">.</span><span class="pl-c1">length</span> &amp;<span class="pl-s1">gt</span><span class="pl-kos"></span><span class="pl-kos">;</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">imageRemove</span><span class="pl-kos">.</span><span class="pl-en">removeAttribute</span><span class="pl-kos">(</span><span class="pl-s">'disabled'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span> <span class="pl-s1">else</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
        <span class="pl-s1">imageRemove</span><span class="pl-kos">.</span><span class="pl-en">setAttribute</span><span class="pl-kos">(</span><span class="pl-s">'disabled'</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-c">// Click the remove button</span>
<span class="pl-k">function</span> <span class="pl-en">deleteCheckedImages</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">iamgesInfo</span> <span class="pl-c1">=</span> <span class="pl-s1">editorImageSample</span><span class="pl-kos">.</span><span class="pl-en">getImagesInfo</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> &amp;<span class="pl-s1">lt</span><span class="pl-kos">;</span> <span class="pl-s1">iamgesInfo</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">;</span> <span class="pl-s1">i</span><span class="pl-c1">++</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">selectedImages</span><span class="pl-kos">.</span><span class="pl-en">indexOf</span><span class="pl-kos">(</span><span class="pl-s1">iamgesInfo</span><span class="pl-kos">[</span><span class="pl-s1">i</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">index</span><span class="pl-kos">)</span> &amp;<span class="pl-s1">gt</span><span class="pl-kos">;</span> <span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-s1">iamgesInfo</span><span class="pl-kos">[</span><span class="pl-s1">i</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">delete</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">i</span><span class="pl-c1">--</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>

    <span class="pl-s1">selectedImages</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span>

<span class="pl-c">/** --- video list --- */</span>
<span class="pl-k">function</span> <span class="pl-en">videoUpload</span> <span class="pl-kos">(</span><span class="pl-s1">targetElement</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">,</span> <span class="pl-s1">videoInfo</span><span class="pl-kos">,</span> <span class="pl-s1">remainingFilesCount</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'videoInfo'</span><span class="pl-kos">,</span> <span class="pl-s1">videoInfo</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">state</span> <span class="pl-c1">===</span> <span class="pl-s">'delete'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">videoList</span><span class="pl-kos">.</span><span class="pl-en">splice</span><span class="pl-kos">(</span><span class="pl-en">findIndex</span><span class="pl-kos">(</span><span class="pl-s1">videoList</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">state</span> <span class="pl-c1">===</span> <span class="pl-s">'create'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-s1">videoList</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">videoInfo</span><span class="pl-kos">)</span>
        <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span> <span class="pl-c">// update</span>
            <span class="pl-c">//</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">remainingFilesCount</span> <span class="pl-c1">===</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'videoList'</span><span class="pl-kos">,</span> <span class="pl-s1">videoList</span><span class="pl-kos">)</span>
        <span class="pl-en">setVideoList</span><span class="pl-kos">(</span><span class="pl-s1">videoList</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-en">setVideoList</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">let</span> <span class="pl-s1">list</span> <span class="pl-c1">=</span> <span class="pl-s">''</span><span class="pl-kos">;</span>

    <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">video</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> <span class="pl-c1">&lt;</span> <span class="pl-s1">videoList</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">;</span> <span class="pl-s1">i</span><span class="pl-c1">++</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">video</span> <span class="pl-c1">=</span> <span class="pl-s1">videoList</span><span class="pl-kos">[</span><span class="pl-s1">i</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
            
        <span class="pl-s1">list</span> <span class="pl-c1">+=</span> <span class="pl-s">'&lt;li&gt;'</span> <span class="pl-c1">+</span>
                    <span class="pl-s">'&lt;button title="delete" onclick="selectVideo(\'delete\','</span> <span class="pl-c1">+</span> <span class="pl-s1">video</span><span class="pl-kos">.</span><span class="pl-c1">index</span> <span class="pl-c1">+</span> <span class="pl-s">')"&gt;X&lt;/button&gt;'</span> <span class="pl-c1">+</span>
                    <span class="pl-s">'&lt;a href="javascript:void(0)" onclick="selectVideo(\'select\','</span> <span class="pl-c1">+</span> <span class="pl-s1">video</span><span class="pl-kos">.</span><span class="pl-c1">index</span> <span class="pl-c1">+</span> <span class="pl-s">')"&gt;'</span> <span class="pl-c1">+</span> <span class="pl-s1">video</span><span class="pl-kos">.</span><span class="pl-c1">src</span> <span class="pl-c1">+</span> <span class="pl-s">'&lt;/a&gt;'</span> <span class="pl-c1">+</span>
                <span class="pl-s">'&lt;/li&gt;'</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-s1">videoTable</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span> <span class="pl-c1">=</span> <span class="pl-s1">list</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-en">selectVideo</span> <span class="pl-kos">(</span><span class="pl-s1">type</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">videoList</span><span class="pl-kos">[</span><span class="pl-en">findIndex</span><span class="pl-kos">(</span><span class="pl-s1">videoList</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">[</span><span class="pl-s1">type</span><span class="pl-kos">]</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos"></span></pre></div>        
    </article>

    <footer>
        <p>SunEditor distributed under the MIT license.</p>
        <p><a href="https://github.com/JiHong88/SunEditor" target="_blank" style="color:#f4b124;">Go to GitHub SunEditor</a></p>
    </footer>
</div>

<script src="../js/common.js"></script>
<!-- suneditor -->
<script src="../../dist/suneditor.min.js"></script>
<!-- codeMirror -->
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/xml/xml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/css/css.js"></script>
<!-- KaTeX -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
<script>
    SUNEDITOR.create('exampleOptions',{
        font : [
            'Arial',
            'tahoma',
            'Courier New,Courier'
        ],
        fontSize : [
            8, 10, 14, 18, 24, 36
        ],
        colorList: [
            ['#ccc', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown'],
            ['SlateGray', 'BurlyWood', 'DeepPink', 'FireBrick', 'Gold', 'SeaGreen']
        ],
        paragraphStyles: [
            'spaced',
            'neon',
            {
                name: 'Custom',
                class: '__se__customClass'
            }
        ],
        textStyles: [
            'translucent',
            {
                name: 'Emphasis',
                style: '-webkit-text-emphasis: filled;',
                tag: 'span'
            }
        ],
        width: '100%',
        maxWidth: '600px',
        minWidth: 400,
        height : 'auto',
        videoWidth : '80%',
        youtubeQuery : 'autoplay=1&mute=1&enablejsapi=1',
        imageWidth : 150,
        popupDisplay: 'local',
        resizingBar: false,
        buttonList : [
            ['font', 'fontSize',
            'fontColor', 'hiliteColor', 'video',
            'paragraphStyle', 'textStyle',
            'fullScreen', 'codeView']
        ],
        callBackSave: function (contents) {
            alert(contents);
        }
    });
    
    SUNEDITOR.create('lineBreak', {
        toolbarContainer: '#toolbar_container',
        showPathLabel: false,
        charCounter: true,
        maxCharCount: 720,
        maxWidth: '700px',
        width: 'auto',
        height: 'auto',
        minHeight : '100px',
        maxHeight : '270px',
        buttonList: [
            ['undo', 'redo', 'font', 'fontSize', 'formatBlock'],
            ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'removeFormat'],
            '/', //Line break
            ['fontColor', 'hiliteColor', 'outdent', 'indent', 'align', 'horizontalRule', 'list', 'table'],
            ['link', 'image', 'video', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save']
        ],
        callBackSave: function (contents) {
            console.log(contents)
        }
    });

    SUNEDITOR.create('useCodeMirror', {
        codeMirror: CodeMirror,
        buttonList: [
            ['codeView']
        ],
        height: 330,
        width: 'auto',
        fullPage: true,
    });

    // response toolbar
    SUNEDITOR.create('responsive_Toolbar', {
        templates: [
            {
                name: 'Template-1',
                html: '<p>HTML source1</p>'
            },
            {
                name: 'Template-2',
                html: '<p>HTML source2</p>'
            }
        ],
        codeMirror: CodeMirror,
        katex: katex,
        buttonList: [
            // default
            ['undo', 'redo'],
            [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
            ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
            ['fontColor', 'hiliteColor', 'textStyle'],
            ['removeFormat'],
            ['outdent', 'indent'],
            ['align', 'horizontalRule', 'list', 'lineHeight'],
            ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template'],
            ['-right', ':r-More Rich-default.more_plus', 'table', 'math', 'imageGallery'],
            ['-right', 'image', 'video', 'audio', 'link'],
            // (min-width: 992)
            ['%992', [
                ['undo', 'redo'],
                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                ['bold', 'underline', 'italic', 'strike'],
                [':t-More Text-default.more_text', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
                ['removeFormat'],
                ['outdent', 'indent'],
                ['align', 'horizontalRule', 'list', 'lineHeight'],
                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template'],
                ['-right', ':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery']
            ]],
            // (min-width: 767)
            ['%767', [
                ['undo', 'redo'],
                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
                ['removeFormat'],
                ['outdent', 'indent'],
                [':e-More Line-default.more_horizontal', 'align', 'horizontalRule', 'list', 'lineHeight'],
                [':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery'],
                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template']
            ]],
            // (min-width: 480)
            ['%480', [
                ['undo', 'redo'],
                [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle', 'removeFormat'],
                [':e-More Line-default.more_horizontal', 'outdent', 'indent', 'align', 'horizontalRule', 'list', 'lineHeight'],
                [':r-More Rich-default.more_plus', 'table', 'link', 'image', 'video', 'audio', 'math', 'imageGallery'],
                ['-right', ':i-More Misc-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'template']
            ]]
        ]
    })

    var spanDis = document.querySelector('#responsive_Toolbar_size');
    window.addEventListener('resize', function (e) {
        spanDis.innerText = (window.innerWidth > 1200 ? 1200 : window.innerWidth) + 'px';
    })

    // resize example
    var editorimageResize = SUNEDITOR.create('imageResize', {
        buttonList: [
            ['undo', 'redo'],
            ['image']
        ],
    })

    editorimageResize.onImageUploadBefore = function (files, info, core, uploadHandler) {
        try {
            ResizeImage(files, uploadHandler)
        } catch (err) {
            uploadHandler(err.toString())
        }
    };

    // upload management
    var editorImageSample = SUNEDITOR.create('imageManagement', {
        buttonList: [
            ['undo', 'redo'],
            ['formatBlock'],
            ['horizontalRule', 'list', 'table'],
            ['image', 'video'],
            ['showBlocks', 'fullScreen', 'preview', 'print']
        ],
    })

    editorImageSample.onImageUpload = imageUpload;
    editorImageSample.onVideoUpload = videoUpload;

    // user function
    var suneditor = null;
    var opt1 = document.getElementById('opt1');
    var opt2 = document.getElementById('opt2');
    var ds1 = document.getElementById('ds1');
    var ds2 = document.getElementById('ds2');

    var options = {
        buttonList: [
            ['undo', 'redo'],
            ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
            ['removeFormat'],
            ['outdent', 'indent'],
            ['fullScreen', 'showBlocks', 'codeView'],
            ['preview', 'print'],
            ['image', 'video']
        ],
        width: '100%'
    }

    function sun_setOptions() {
        suneditor.setOptions({
            mode: 'inline',
            minHeight: '300px',
            colorList: [
                ['#ccc', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown']
            ],
            buttonList: [
                ['fontColor', 'hiliteColor']
            ]
        });

        opt1.style.display = 'none';
        opt2.style.display = 'inline-block';
    }

    function sun_resetOptions() {
        suneditor.setOptions({
            mode: 'classic',
            minHeight: null,
            colorList: null,
            buttonList: [
                ['undo', 'redo'],
                ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
                ['removeFormat'],
                ['outdent', 'indent'],
                ['fullScreen', 'showBlocks', 'codeView'],
                ['preview', 'print'],
                ['image', 'video']
            ],
        });

        opt1.style.display = 'inline-block';
        opt2.style.display = 'none';
    }

    function sun_setDefaultStyle() {
        suneditor.setDefaultStyle('font-family: cursive; font-size: 10px;');
        ds1.style.display = 'none';
        ds2.style.display = 'inline-block';
    }

    function sun_resetDefaultStyle() {
        suneditor.setDefaultStyle('');
        ds1.style.display = 'inline-block';
        ds2.style.display = 'none';
    }

    function sun_noticeOpen(message) {
        suneditor.noticeOpen(message);
    }

    function sun_noticeClose() {
        suneditor.noticeClose();
    }
    
    function sun_save() {
        suneditor.save();
    }

    function sun_getContext() {
        console.log(suneditor.getContext());
    }

    function sun_getContents() {
        alert(suneditor.getContents());
    }

    function sun_getText() {
        alert(suneditor.getText());
    }

    function sun_getImagesInfo() {
        console.log(suneditor.getImagesInfo());
    }

    function sun_getFilesInfo(pluginName) {
        console.log(suneditor.getFilesInfo(pluginName));
    }

    function sun_insertImage() {
        suneditor.insertImage(document.getElementById('example_files_input').files);
    }

    function sun_insertHTML(html) {
        suneditor.insertHTML(html);
    }

    function sun_setContents(content) {
        suneditor.setContents(content);
    }

    function sun_appendContents(content) {
        suneditor.appendContents(content);
    }

    function sun_readonly() {
        suneditor.readOnly(!suneditor.core.isReadOnly);
    }

    function sun_disable() {
        suneditor.disable();
    }

    function sun_enable() {
        suneditor.enable();
    }

    function sun_show() {
        suneditor.show();
    }

    function sun_hide() {
        suneditor.hide();
    }

    function sun_toolbar_disable() {
        suneditor.toolbar.disable();
    }

    function sun_toolbar_enable() {
        suneditor.toolbar.enable();
    }

    function sun_toolbar_show() {
        suneditor.toolbar.show();
    }

    function sun_toolbar_hide() {
        suneditor.toolbar.hide();
    }

    function sun_destroy() {
        suneditor.destroy();
        suneditor = null;
    }

    function sun_create() {
        suneditor = SUNEDITOR.create('exampleFunction', options);

        suneditor.onload = function (core, reload) { console.log('onload-core', core); console.log('onload-reload', reload)}
        suneditor.onScroll = function (e) { console.log('onScroll', e); }
        suneditor.onMouseDown = function (e) { console.log('onMouseDown', e) }
        suneditor.onClick = function (e) { console.log('onClick', e) }
        suneditor.onInput = function (e) { console.log('onInput', e) }
        suneditor.onKeyDown = function (e) { console.log('onKeyDown', e) }
        suneditor.onKeyUp = function (e) { console.log('onKeyUp', e) }
        suneditor.onDrop = function (e) { console.log('onDrop', e) }
        suneditor.onChange = function (contents) { console.log('onChange', contents) }
        suneditor.onPaste = function (e, cleanData, maxCharCount, core) { console.log('onPaste', e, cleanData, maxCharCount) }
        suneditor.onCopy = function (e, clipboardData, core) { console.log('onCopy', e, clipboardData) }
        suneditor.onCut = function (e, clipboardData, core) { console.log('onCut', e, clipboardData) }
        suneditor.onFocus = function (contents) { console.log('onFocus', contents) }
        suneditor.onBlur = function (contents) { console.log('onBlur', contents) }
        suneditor.onImageUpload = function (targetElement, index, state, imageInfo, remainingFilesCount) { 
            console.log('targetElement:' + targetElement + ', index:' + index + ', state("create","update","delete"):' + state + ', imageInfo:' + imageInfo + ', remainingFilesCount:' + remainingFilesCount)
        }
        suneditor.onVideoUpload = function (targetElement, index, state, videoInfo, remainingFilesCount) { 
            console.log('targetElement:' + targetElement + ', index:' + index + ', state("create","update","delete"):' + state + ', videoInfo:' + videoInfo + ', remainingFilesCount:' + remainingFilesCount)
        }
        suneditor.showInline = function (toolbar, context) {
            console.log('toolbar', toolbar);
            console.log('context', context);
        }
        suneditor.showController = function (name, controllers, core) {
            console.log('plugin name', name);
            console.log('controller elements', controllers);
        }
    }

    sun_create();
</script>
</body>
</html>
